---
title: Loader
description: Loading indicators for async states.
component: Loader
---

<LiveComponent language="tsx">
{`
  import { SpinLoader, StripeLoader } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-row gap-6 items-center">
    <SpinLoader />
    <StripeLoader />
  </div>
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    SpinLoader: {
      description: "Spinner loader component",
      type: "{ size?: number }",
      required: false,
      default: "{ size: 32 }",
    },
    StripeLoader: {
      description: "Stripe loader component",
      type: "{ className?: string }",
      required: false,
      default: "{}",
    },
  }}
/>

---

## Usage

### Spin Loader

<LiveComponent language="tsx">
{`
  import { SpinLoader } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-row gap-6 items-center">
    <SpinLoader size={16} />
    <SpinLoader />
    <SpinLoader size={48} />
  </div>
`}
</LiveComponent>

### Stripe Loader

<LiveComponent language="tsx">
{`
  import { StripeLoader } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4">
    <StripeLoader />
    <StripeLoader className="text-destructive" />
    <StripeLoader className="w-60 h-6" />
  </div>
`}
</LiveComponent>